import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects

Item {

    Flow {

        anchors.fill: parent
        spacing: 10
        padding: 10

        Rectangle {
            width: 280
            height: 280
            color: "black"

            RectangularGlow {
                id: effect
                anchors.fill: rect
                glowRadius: 10
                spread: 0.2
                color: "white"
                cornerRadius: 35
            }

            Rectangle {
                id: rect
                color: "black"
                anchors.centerIn: parent
                width: Math.round(parent.width / 1.5)
                height: Math.round(parent.height / 2)
                radius: 25
            }

            Grid {
                columns: 2

                anchors.centerIn: parent

                Text { text: "glowRadius:"; color: "white" }
                Slider {
                    from: 0
                    to: 50
                    stepSize: 1
                    value: 35

                    onValueChanged: {
                        console.log("glowRadius: " + value)
                        effect.glowRadius = value
                    }
                }

                Text { text: "cornerRadius:"; color: "white" }
                Slider {
                    from: 0
                    to: 50
                    stepSize: 1
                    value: 25

                    onValueChanged: {
                        console.log("cornerRadius: " + value)
                        effect.cornerRadius = value
                    }
                }

                Text { text: "spread:"; color: "white" }
                Slider {
                    from: 0.0
                    to: 1.0
                    stepSize: 0.1
                    value: 0.2

                    onValueChanged: {
                        console.log("spread: " + value)
                        effect.spread = value
                    }
                }
            }
        }

        Rectangle {
            width: 280
            height: 280
            color: "white"
            border.color: "gray"

            RectangularGlow {
                id: effect1
                anchors.fill: rect1
                glowRadius: 10
                spread: 0.2
                color: "gray"
                cornerRadius: 35
            }

            Rectangle {
                id: rect1
                color: "white"
                anchors.centerIn: parent
                width: Math.round(parent.width / 1.5)
                height: Math.round(parent.height / 2)
                radius: 25
            }

            Grid {
                columns: 2

                anchors.centerIn: parent

                Text { text: "glowRadius:" }
                Slider {
                    from: 0
                    to: 50
                    stepSize: 1
                    value: 35

                    onValueChanged: {
                        console.log("glowRadius: " + value)
                        effect1.glowRadius = value
                    }
                }

                Text { text: "cornerRadius:" }
                Slider {
                    from: 0
                    to: 50
                    stepSize: 1
                    value: 25

                    onValueChanged: {
                        console.log("cornerRadius: " + value)
                        effect1.cornerRadius = value
                    }
                }

                Text { text: "spread:" }
                Slider {
                    from: 0.0
                    to: 1.0
                    stepSize: 0.1
                    value: 0.2

                    onValueChanged: {
                        console.log("spread: " + value)
                        effect1.spread = value
                    }
                }
            }
        }
    }
}
